<template>
    <p>这是一个组件123</p>
    {{ msg }}
    {{ htmlSpan }}
    <div v-html="htmlSpan"></div>
    <!-- <img src="//www.baidu.com/img/flexible/logo/pc/index@2.png" alt="">
     <img v-bind:src="img1" alt="">
    <img :src="img1" alt=""> -->
    <button v-on:click="btnAction">点击</button>
    <button @click="btnAction">点击666</button>
    <h1>v-if</h1>
    <p v-if="ia">v-if is true</p>
    <p v-else>v-if is false</p>
    <p v-show="ia">v-show</p>
    <button @click="si">切换状态</button>

    <p v-if="num==0">num is 0</p>
    <p v-else-if="num==1">num is 1</p>
    <p v-else>num 非0 非1</p>
    <button @click="change(0)">num 设置为 0</button>
    <button @click="change(1)">num 设置为 1</button>
    <button @click="change(2)">num 设置为 2</button>
    <h1>v-for</h1>
    <p v-for="item,index in arr">item 是{{ item }},index 是{{ index }}</p>
    <p v-for="value,key,index in obj">value 是{{ value }},key 是{{ key }},index 是{{ index }}</p>
    <h1>v-model</h1>
    <h2>配置信息</h2>
    <div>
        <label>昵称：</label>
        <input type="text" v-model="user.name">
    </div>
    <div>
        <label>性别：</label>
        <input type="radio" name="sex" v-model="user.sex" value="男">男
        <input type="radio" name="sex" v-model="user.sex" value="女">女
    </div>
    <div>
        <label>心愿单：</label>
        <input type="checkbox" name="wish" v-model="user.wish" value="iphone">iphone
        <input type="checkbox" name="wish" v-model="user.wish" value="ipad">ipad
        <input type="checkbox" name="wish" v-model="user.wish" value="iwatch">iwatch
        <input type="checkbox" name="wish" v-model="user.wish" value="其他">其他
    </div>
    <div>
        <label>组号：</label>
        <select v-model="user.group" style="width: 100px;">
        <option value="1">1</option>
        <option value="2">2</option>
        <option value="3">3</option>
        <option value="4">4</option>
        </select>
    </div>
    <div>
        <label>备注：</label>
        <textarea v-model="user.remark"></textarea>
    </div>

    

    <h2>信息</h2>
    <p>昵称：{{ user.name }}</p>
    <p>性别：{{ user.sex }}</p>

</template>

<script>
export default {
    data(){
        return{
            msg:"芜湖",
            htmlSpan:"<span>啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊</span>",
            img1:"//www.baidu.com/img/flexible/logo/pc/index@2.png",
            ia:true,
            num:0,
            arr:['tom','jerry','dog','host'],
            obj:{
                a:'tom',
                b:'jerry',
                c:'dog',
                d:'host'
            },
            user:{
                name:"",
                sex:'男',
                wish:[],
                group:'',
                remark:''

            }
        };
    },
    methods:{
        btnAction(){
            console.log("123");
            console.log('this.msg',this.msg);
            this.text()
        },
        text(){
            console.log("hhhh")
        },
        si(){
            this.ia = !this.ia
        },
        change(number){
            this.num = number
        }
    }
    
}
</script>